<template>
  <div class="comment-list">
    <div class="comment-form">
      <el-input
        v-model="commentContent"
        type="textarea"
        :rows="3"
        placeholder="写下你的评论..."
      />
      <el-button type="primary" @click="handleSubmit">
        发表评论
      </el-button>
    </div>
    
    <div class="comments">
      <div
        v-for="comment in comments"
        :key="comment.id"
        class="comment-item"
      >
        <el-avatar :size="40" :src="comment.avatar" />
        <div class="comment-content">
          <div class="comment-header">
            <span class="username">{{ comment.author }}</span>
            <span class="time">{{ formatDate(comment.createTime) }}</span>
          </div>
          <p class="text">{{ comment.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Comment } from '@/types'
import { formatDate } from '@/utils/format'

const props = defineProps<{
  comments: Comment[]
}>()

const emit = defineEmits<{
  (e: 'submit', content: string): void
}>()

const commentContent = ref('')

const handleSubmit = () => {
  if (!commentContent.value.trim()) return
  emit('submit', commentContent.value)
  commentContent.value = ''
}
</script>

<style lang="scss" scoped>
.comment-list {
  .comment-form {
    margin-bottom: 20px;
    
    .el-button {
      margin-top: 10px;
      float: right;
    }
  }
  
  .comment-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    
    .comment-content {
      flex: 1;
      
      .comment-header {
        margin-bottom: 5px;
        
        .username {
          font-weight: bold;
          margin-right: 10px;
        }
        
        .time {
          color: #999;
          font-size: 0.9em;
        }
      }
      
      .text {
        margin: 0;
        line-height: 1.6;
      }
    }
  }
}
</style> 